<template>
    <div
        v-if="showDialog"
        class="full-video-container"
        @click.self="onClose"
    >
        <div class="full-video-box">
            <video
                ref="videoRef"
                v-if="videoUrl"
                class="video-item"
                controls
                :src="videoUrl"
            ></video>
            <template v-else>
                <el-carousel
                    height="496px"
                    :autoplay="false"
                    @change="onChange"
                    indicator-position="none"
                >
                    <el-carousel-item
                        v-for="(item, index) in videoList"
                        :key="index"
                    >
                        <div style="position: relative;">
                            <video
                                :ref="(el) => setItemRefs(el as HTMLVideoElement, index)"
                                class="video-item"
                                controls
                                :src="setSrc(item)"
                            ></video>
                            <div class="flex-center">
                                <div class="tag">{{index + 1}}/{{videoList.length}}</div>
                            </div>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </template>
            <el-icon
                class="icon-close pointer"
                @click="onClose"
            >
                <Close />
            </el-icon>
            <div
                v-if="controls"
                class="controls-box"
            >
                <div
                    class="icon-delete mg-b-25 pointer"
                    @click.stop="onRemove"
                ></div>
                <div
                    class="icon-download mg-b-25 pointer"
                    @click.stop="onDownload"
                ></div>
                <div
                    class="icon-play pointer"
                    @click.stop="onPlay"
                ></div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import { ref, watch } from "vue";
    import { ElMessage, ElMessageBox } from "element-plus";
    /**
     * 单个的直接传videoUrl 多个的传videoList 两个传一个就行
     * videoList 格式为 ['xxxxxx.mp4']
     * videoUrl: 单个传
     * videoList: 多个传
     * controls: 是否展示删除/下载/播放按钮
     */
    const props = defineProps({
        show: {
            type: Boolean,
            default: false,
        },
        videoUrl: {
            type: String,
        },
        videoList: {
            type: Array<string>,
        },
        controls: {
            type: Boolean,
            default: false,
        },
    });
    const emits = defineEmits(["update:show", "removeVideo", "addVideo"]);

    const showDialog = ref(false);

    const videoRef = ref<HTMLVideoElement | null>(null);

    const videoLiseRef = ref({}) as any;

    const cur = ref(0);

    const setItemRefs = (el: HTMLElement, index: number) => {
        if (el) {
            videoLiseRef.value[`video${index}`] = el;
        }
    };

    const setSrc = (item: any) => {
        return typeof item === "string" ? item : item.fileUrl;
    };

    /**
     * 点击关闭按钮，关闭后将正在播放的视频暂停掉
     */
    const onClose = () => {
        if (props.videoUrl) {
            videoRef.value?.pause();
        } else {
            for (const key in videoLiseRef.value) {
                videoLiseRef.value[key].pause();
            }
        }
        showDialog.value = false;
    };
    /**
     * 点击删除按钮
     */
    const onRemove = () => {
        ElMessageBox.confirm("确认删除该视频吗？", "提示", {
            type: "warning",
        }).then(() => {
            if (props.videoUrl) {
                ElMessage.error("必须保留一个视频");
            } else {
                if ((props.videoList as any)?.length <= 1) {
                    ElMessage.error("必须保留一个视频");
                } else {
                    emits("removeVideo", cur.value);
                }
            }
        });
    };
    /**
     * 点击下载按钮
     */
    const onDownload = () => {
        if (props.videoUrl) {
            handleDownload(props.videoUrl);
        } else {
            handleDownload((props.videoList as any)[cur.value]);
        }
    };

    /**
     * 下载视频
     * @param url
     */
    const handleDownload = (url: string) => {
        fetch(url)
            .then((res) => {
                return res.blob();
            })
            .then((blob: any) => {
                const a = document.createElement("a");
                const objUrl = window.URL.createObjectURL(blob);
                a.href = objUrl;
                a.download = "视频";
                document.body.appendChild(a);
                a.click();
                window.URL.revokeObjectURL(objUrl);
                document.body.removeChild(a);
            });
    };

    const onPlay = () => {
        emits("addVideo");
        // if (props.videoUrl) {
        //     videoRef.value?.play()
        // } else {
        //     for (const key in videoLiseRef.value) {
        //         videoLiseRef.value[key].pause()
        //     }
        //     videoLiseRef.value[`video${cur.value}`].play()
        // }
    };

    const onChange = (ev: number) => {
        cur.value = ev;
    };

    watch(
        () => props.show,
        (newval) => {
            showDialog.value = newval;
        }
    );

    watch(showDialog, (newval) => {
        emits("update:show", newval);
    });
</script>
<style lang="scss" scoped>
    .full-video-container {
        position: fixed;
        width: 100vw;
        height: 100vh;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 100000;
    }

    .video-item {
        width: 772px;
        height: 496px;
        border-radius: 12px;
    }

    .full-video-box {
        width: 772px;
        height: 496px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .controls-box {
        position: absolute;
        right: -60px;
        bottom: 10px;
    }

    .icon-close {
        position: absolute;
        right: 0;
        top: -50px;
        color: #fff;
        font-size: 30px;
    }

    .icon-delete {
        width: 36px;
        height: 36px;
        background: url("../../assets/image/video/icon-delete.png") no-repeat 100%
            100%;
        background-size: cover;

        &:hover {
            background: url("../../assets/image/video/icon-delete-hover.png")
                no-repeat 100% 100%;
            background-size: cover;
        }
    }

    .icon-download {
        width: 36px;
        height: 36px;
        background: url("../../assets/image/video/icon-download.png") no-repeat 100%
            100%;
        background-size: cover;

        &:hover {
            background: url("../../assets/image/video/icon-download-hover.png")
                no-repeat 100% 100%;
            background-size: cover;
        }
    }

    .icon-play {
        width: 36px;
        height: 36px;
        background: url("../../assets/image/video/icon-play.png") no-repeat 100%
            100%;
        background-size: cover;

        &:hover {
            background: url("../../assets/image/video/icon-play-hover.png")
                no-repeat 100% 100%;
            background-size: cover;
        }
    }
    .flex-center {
        position: absolute;
        bottom: 60px;
        left: 0;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .tag {
        color: #ffffff;
        padding: 4px 10px;
        background-color: rgba(64, 64, 64, 0.6);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>